<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${session.user.userName}+'的收藏-浮生若梦'">我的收藏-浮生若梦</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link rel="stylesheet" type="text/css" href="css/pageCss.css">
    <style>
        body {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-image: url("img/nier-gaosi.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body ondragstart="return false">
<div th:replace="part/nav ::nav"></div>
<div class="container" style="margin-top: 4%">
    <div class="col-md-4">
        <div class="bg">我的收藏</div>
    </div>
    <div class="col-md-8">
        <div th:if="${collections!=null||collections.size()>0}" th:each="postUser:${collections}">
            <!--4个字的标签展示5个-->
            <!--5个字的标签展示4个-->
            <!--6个字的标签展示3个-->
            <div class="bg">
                <div class="mr-top list-inline">
                    <div align="left" class="two" style="width: 30%">
                        <span th:each="label:${postUser.post.labels}" th:text="${label.label}" class="label label-info"
                              style="margin-right: 1%;cursor: pointer">标签标签标签</span>
                    </div>
                    <div align="right" class="two" style="width: 70%">
                        <span><a th:onclick="'userSpaceSkip('+${postUser.user.userId}+')'" class="label label-success"
                                 th:text="'作者：'+${#strings.abbreviate(postUser.user.userName,8)}">作者：阿汐</a></span>
                        <span class="label label-default" th:text="'时间：'+${postUser.post.postTime}">2020年7月27日</span>
                        <span class="label label-default" th:text="'评论：'+${postUser.post.postComment}">评论：24</span>
                        <span class="label label-default" th:text="'点赞：'+${postUser.post.postLike}">点赞：10</span>
                        <span class="label label-default" th:text="'收藏：'+${postUser.post.postCollection}">收藏：50</span>
                        <span><a th:id="'collection'+${postUser.post.postId}"
                                 th:onclick="'collection('+${postUser.post.postId}+','+${session.user==null}+')'"
                                 class="label label-danger"
                                 th:text="'删除'">删除</a></span>
                    </div>
                </div>
                <div class="mr-top" style="margin-top: 3.4%;cursor: pointer"
                     th:onclick="'skip('+${postUser.post.postId}+')'">
                    <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                         th:text="${postUser.post.postTitle}"></div>
                    <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                         th:text="${postUser.post.postDetail}"></div>
                </div>
            </div>
        </div>
        <div th:if="${collections==null||collections.size()<=0}" class="bg">
            你没有收藏任何内容
        </div>
        <div style="opacity: 0.7;" align="center">
            <nav>
                <!--pageInfo.pages-4>=pageInfo.pageNum?-->
                <!--分页-->
                <ul class="pager">
                    <li class="previous" th:classappend="${pageInfo.hasPreviousPage?'':'disabled'}"><a
                            style="color: black;" th:styleappend="${pageInfo.hasPreviousPage?'cursor: pointer;':''}"
                            th:onclick="'hasPre('+${pageInfo.hasPreviousPage}+','+${pageInfo.prePage}+')'"><label
                            class="glyphicon glyphicon-arrow-left"></label>&nbsp;上一页</a></li>
                    <li th:each="num:${#numbers.sequence(pageInfo.pageNum-4>0?pageInfo.pageNum+4>pageInfo.pages?pageInfo.pages-8:pageInfo.pageNum-4:1,pageInfo.pages-pageInfo.pageNum>4?pageInfo.pageNum-4<=0?9:pageInfo.pageNum+4:pageInfo.pages)}">
                        <a style="color: black;"
                           th:styleappend="${num==pageInfo.pageNum?'background-color: #449d44':''}" th:text="${num}"
                           th:href="${'/collectionList.htm?num='+num}"></a></li>
                    <li class="next" th:classappend="${pageInfo.hasNextPage?'':'disabled'}"><a style="color: black;"
                                                                                               th:styleappend="${pageInfo.hasNextPage?'cursor: pointer;':''}"
                                                                                               th:onclick="'hasNext('+${pageInfo.hasNextPage}+','+${pageInfo.nextPage}+')'">下一页&nbsp;<label
                            class="glyphicon glyphicon-arrow-right"></label></a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/follow.js"></script>
<script>
    //通过内容id跳转
    function skip(id) {
        window.location.href = "/browsePost.htm?id=" + id;
    }

    //通过userID跳转
    function userSpaceSkip(id) {
        window.location.href = "/browseUser.htm?id=" + id;
    }

    //如果有前一页跳转
    function hasPre(hasPre, prePage) {
        if (hasPre == true) {
            window.location.href = "/collectionList.htm?num=" + prePage;
        }
    }

    //如果有后一页跳转
    function hasNext(hasNext, nextPage) {
        if (hasNext == true) {
            window.location.href = "/collectionList.htm?num=" + nextPage;
        }
    }

    //收藏和取消收藏
    function collection(id, user) {
        var element_id = "#collection" + id;
        if (user) {
            $("#login").modal("show");
        } else {
            $.ajax({
                cache: false,
                async: true,
                type: 'post',
                url: "/postCollection.htm",
                data: {"id": id},
                success: function (res) {
                    if (res) {
                        $(element_id).removeClass("label-success");
                        $(element_id).addClass("label-danger");
                        $(element_id).text("删除");
                    } else {
                        $(element_id).removeClass("label-danger");
                        $(element_id).addClass("label-success");
                        $(element_id).text("收藏");
                    }
                }
            });
        }
    }
</script>
</body>
</html>